<template>
  <div class="app-container">
      <h1>酒店预约信息添加</h1><hr/>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户UID" v-if="!hotelid">
            <el-input type="text" v-model="uid" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="酒店编号" prop="zkcode">
            <el-input type="text" v-model="ruleForm.zkcode" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="预约时间" prop="bookingTime">
            <div class="block">
              <span class="demonstration"></span>
                <el-date-picker
                  v-model="ruleForm.bookingTime"
                  type="datetime"
                  placeholder="选择预约日期时间"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  default-time="12:00:00">
                </el-date-picker>
            </div>
         </el-form-item>
          <el-form-item label="预约房间编号" prop="roomcode">
            <el-input v-model="ruleForm.roomcode"></el-input>
         </el-form-item>
          <el-form-item label="详细信息" prop="bookingInfo">
            <el-input v-model="ruleForm.bookingInfo"></el-input>
         </el-form-item>

           <el-form-item label="酒店名称" prop="zkname">
            <el-input v-model="ruleForm.zkname"></el-input>
         </el-form-item>
          <el-form-item label="房间名称" prop="roomname">
            <el-input v-model="ruleForm.roomname"></el-input>
         </el-form-item>
          <el-form-item label="预约花销" prop="money">
            <el-input v-model="ruleForm.money"></el-input>
         </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="back()" v-if="hotelid">返回</el-button>
         </el-form-item>

      </el-form>

   </div>
</template>


<script>
import hotelbook from './api/hotelbook'

export default {
    data() {
      var validateCode = (rule, value, callback) => {
         if (value === '') {
          callback(new Error('请输入酒店编号'));
        } else {
          callback();
        }
      };

      var validateBookingTime = (rule, value, callback) => {
         if (value === '') {
          callback(new Error('请选择正确的预约时间'));
        } else {
          callback();
        }
      };

      var validateRoomcode = (rule, value, callback) => {
         if (value === '') {
          callback(new Error('请输入房间编号'));
        } else {
          callback();
        }
      };

       var checkBookingInfo = (rule, value, callback) => {
         if (value === '') {
            return callback(new Error('请输入预约详细信息'));
         }else{
           callback();
         }
      };

       var checkZkname = (rule, value, callback) => {
         if (value === '') {
            return callback(new Error('请输入酒店名称'));
         }else{
           callback();
         }
      };

      var checkRoomname= (rule, value, callback) => {
         if (value === '') {
            return callback(new Error('请输入房间名称'));
         }else{
           callback();
         }
      };
       var checkMoney = (rule, value, callback) => {
         if (value === '') {
            return callback(new Error('请输入预约花销'));
         }else{
           callback();
         }
      };
      return {
        hotelid: 0,
        uid: '',
        ruleForm: {
          orderId:'',
          zkcode: '',
          bookingTime: '',
          roomcode: '',
          bookingInfo: '',
          zkname:'',
          roomname:'',
          money:''
        },
        rules: {
          zkcode: [
            { validator: validateCode, trigger: 'blur' }
          ],
          bookingTime: [
            { validator: validateBookingTime, trigger: 'blur' }
          ],
          roomcode: [
            { validator: validateRoomcode, trigger: 'blur' }
          ],
          bookingInfo: [
            { validator: checkBookingInfo, trigger: 'blur' }
          ],
           zkname: [
            { validator: checkZkname, trigger: 'blur' }
          ],
           roomname: [
            { validator: checkRoomname, trigger: 'blur' }
          ],
           money: [
            { validator: checkMoney, trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.hotelid=0;
    },
   methods: {
      // 返回
      back(){
         this.$router.go(0);
      },
       // 生成UUID订单号
      guid() {
          return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
              var r = Math.random() * 16 | 0,
                  v = c == 'x' ? r : (r & 0x3 | 0x8);
              return v.toString(16);
          });
      },
      // 添加
      save(){
         this.ruleForm.orderId= this.guid();
         //TODO 根据订单ID关联一个用户uid
         hotelbook.saveHotelBook(this.ruleForm)
            .then(response => {
               this.$message({
                  type: 'success',
                  message: '添加成功!'
               })
               this.$router.push({path:'/hotel-hotelbook'})
            })
      },
       // 修改
      update(){
         hotelbook.updateHotelBook(this.ruleForm)
            .then(response => {
               this.$message({
                  type: 'success',
                  message: '修改成功!'
               })
               this.$router.go(0);
               this.hotelid=0;
            })
      },
      // 判断添加还是修改
      saveOrUpdate() {
          if(this.hotelid == 0) { 
              this.save();
          } else {
              this.update();
          }
      },

      init(id){
          this.hotelid=id;
          this.getHotelBook(id);
      },
      //根据id查询
      getHotelBook(id) {
         hotelbook.getHotelBook(id)
          .then(({data}) =>{
            console.log(data.data)
                this.ruleForm=data.data;
          })  
      },
      // 规则提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          } else {
            alert('请输入合法的数据！');
            return false;
          }
        });
        this.saveOrUpdate();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.uid='';
      }

  }

}

</script>
